<!-- 订单柱状图 -->
<template>
  <div id="order-echart" style="width: 1000px;height:300px;"></div>
</template>

<script>
export default {
  // name: "app",
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("order-echart"));
      // 指定图表的配置项和数据
      let option = {
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["订单金额", "订单数"]
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "05/01",
              "05/02",
              "05/03",
              "05/04",
              "05/05",
              "05/06",
              "05/07",
              "05/08",
              "05/09",
              "05/10",
              "05/11",
              "05/12",
              "05/13",
              "05/14"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "订单金额",
            type: "bar",
            color: "#48D1CC",
            label: {
              show: true,
              position: "top"
            },
            data: [
              0,
              0,
              0,
              0,
              0,
              140,
              680,
              364,
              102,
              66,
              168,
              388,
              313.2,
              490.3
            ]
          },
          {
            name: "订单数",
            type: "bar",
            color: "#DDA0DD",
            label: {
              show: true,
              position: "top"
            },
            data: [0, 0, 0, 0, 0, 70, 175, 182, 48, 18, 66, 88, 69, 90],
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

<style scoped>
</style>
